<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/saleSystem' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>理赔管理</el-breadcrumb-item>
      <el-breadcrumb-item>理赔列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 理赔信息 -->
    <el-table :data="LipeiData.data" style="width: 100%">
      <el-table-column label="客户姓名" prop="clientName" style="width: 60px"></el-table-column>
      <el-table-column label="所购保险" prop="insuranceName" style="width: 100px"></el-table-column>
      <el-table-column label="保险价格" prop="insurancePirce" style="width: 100px"></el-table-column>
      <el-table-column label="保险期限" prop="timeLength" style="width: 50px"></el-table-column>
      <el-table-column label="理赔描述" prop="reason"></el-table-column>
      <el-table-column label="理赔凭证" prop="imgname" style="width: 100px">
        <template slot-scope="scope">
          <img
            width="50"
            v-if="scope.row.imgname"
            :src=" 'http://localhost:3000/images/' +scope.row.imgname "
            alt
          />
          <img width="50" v-else src="http://localhost:3000/images/lipei.png" alt />
        </template>
      </el-table-column>
      <el-table-column label="理赔金额" prop="payment" style="width: 50px"></el-table-column>
      <el-table-column label="理赔状态" prop="status" style="width: 100px"></el-table-column>
      <el-table-column label="创建时间" prop="time" style="width: 100px"></el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="$router.push('/Change/' + scope.row._id)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <lipeiPage :saleId = saleId></lipeiPage>
  </div>
</template>

<script>
import lipeiPage from "./lipeiPage.vue"
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState } = createNamespacedHelpers("lipei");
export default {
  components:{
    lipeiPage,
  },
  data() {
    return {
      search: "",
      saleId: "",
    };
  },
  created() {
    //获取某个销售下的理赔信息数据，传入一个销售id
    const id = "5f6aa2a0f97e0d3fb82c578a";
    this.saleId = id;
    this.getSaleLipeiAsync(this.saleId);
  },
  computed: {
    ...mapState(["LipeiData"]),
  },
  methods: {
    ...mapActions(["getSaleLipeiAsync", "deleteOneAsync"]),
    async handleDelete(id) {
      // console.log(id);
      const data = await this.deleteOneAsync(id);
      if (data.status) {
        this.getSaleLipeiAsync(this.saleId);
        this.$message({
          message: data.message,
          type: "success",
        });
      } else {
        this.$message.error(data.message);
      }
    },
  },
};
</script>

<style>
</style>